<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>

		<meta charset="utf-8">
		<title></title>
		<%String basePath = request.getScheme()
				+"://"
				+request.getServerName()
				+":"
				+request.getServerPort()
				+request.getContextPath()
				+"/";
	%>
		<base href="<%=basePath%>">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="phone/css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="phone/css/iconfont.css">
		<style type="text/css">
			.diy-caregorize-list{
				width: 30%;
				height: 13rem;
				position: absolute;
				top: 7%;
			}
			.diy-meun-list{
				width: 70%;
				height: 13rem;
				position: absolute;
				top: 7%;
				left: 31%;
			}
			.mui-row.mui-fullscreen>[class*="mui-col-"] {
				height: 100%;
			}
			
			.mui-col-xs-3,
			.mui-col-xs-9 {
				overflow-y: auto;
				height: 100%;
			}
			
			.mui-segmented-control .mui-control-item {
				line-height: 50px;
				width: 100%;
			}
			
			.mui-control-content {
				display: block;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				background-color: #fff;
				
			}
			.mui-popover {
				height: 300px;
			}
			.icon {
			  width: 1em;
			  height: 1em;
			  vertical-align: -0.15em;
			  fill: currentColor;
			  overflow: hidden;
			  }
		</style>
	</head>
	<body>

		<script src="phone/js/jquery-3.3.1.min.js"></script>
		<script src="phone/js/mui.js"></script>
		<script src="phone/js/div.js"></script>
		<script src="phone/js/iconfont.js"></script>
		<!-- 头部开始 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">（菜单界面）可回到上个页面</h1>
		</header>
		<!-- 头部结束 -->
		<!-- 选项卡开始 -->
		<%@include file="../common/foots.jsp"%>

		<!-- 选项卡结束 -->
			<div class="mui-content mui-row mui-fullscreen">
				<div class="mui-col-xs-3">
					<div id="segmentedControls" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">
					</div>
				</div>
				<div id="segmentedControlContents" class="mui-col-xs-9" style="border-left: 1px solid #c8c7cc;">
				</div>
				<a href="#bottomPopover" class="mui-btn mui-btn-link mui-pull-right iconfont icon-tianjia" style="color: #F0AD4E;font-size: 2rem;position: absolute;bottom: 15%;right:1%;z-index: 9999;"></a>
				<div id="bottomPopover" class="mui-popover mui-popover-arrow" style="width: -webkit-fill-available;">
					<div class="mui-popover-arrow"></div>
					<div >
						<div class="mui-scroll">
							<ul class="mui-table-view">
							<c:forEach items="${sessionScope.cart.items}" var="entry">
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">

                                            <button  type="button" class="mui-btn mui-btn-blue mui-pull-right" style="background-color: #F0AD4E;border: #EC971F;margin-right: 7%;">数量:</button>
											<button  type="button" class="mui-btn mui-btn-blue mui-pull-right" style="background-color: #F0AD4E;border: #EC971F;margin-right: 0%;">${entry.value.quantities}</button>

										<div class="mui-media-body">
											<font size="" color="">${entry.value.foodName}</font><br>
											<font size="" color="">￥:${entry.value.total}</font>
										</div>

									</a>
								</li>
							</c:forEach>
							</ul>
                            <button id="slider" type="button" class="mui-btn mui-btn-blue mui-pull-right">已选好</button>
						</div>
					</div>
				</div>
			</div>



	<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});

			var controls = document.getElementById("segmentedControls");
			var contents = document.getElementById("segmentedControlContents");
			var html = [];
			var html1 = [];

			//菜系选项卡
			<c:forEach  begin="0" end="${requestScope.foodCategorys.size()}" varStatus="status" items="${requestScope.foodCategorys}" var="foodCategory">
				html1.push('<a class="mui-control-item" data-index="' + (${foodCategory.id} - 1) + '" href="#content' + ${foodCategory.id} + '">菜系${foodCategory.id}：' + "${foodCategory.name}" + '</a>');
			</c:forEach>


			 controls.innerHTML = html1.join('');
			 // html = [];

			//菜品选项卡
			<c:forEach  begin="0" end="${requestScope.foodCategorys.size()}" varStatus="status" items="${requestScope.foodCategorys}" var="foodCategory">
				html.push('<div id="content' + ${foodCategory.id} + '" class="mui-control-content"><ul class="mui-table-view">');

			<c:forEach begin="0" end="${requestScope.foods.size()}" items="${requestScope.foods}" var="food" varStatus="status">
                    if(${food.categoryId==foodCategory.id}){
                        var txt='';
                        txt+='<li class="mui-table-view-cell mui-media">';
                        txt+='<div class="mui-media-body">';
                        txt+='<a id="foodItem" food="${food.id}" >';
                        txt+='<img class="mui-media-object mui-pull-left" src="${food.image}" style="max-width: 6.25rem;height: 6.25rem;">';
                        txt+='<h4 style="color: #000000;">'+"${food.name}"+'</h4>';
                        txt+='<font size="2" color="black" >${food.introduction}</font>';
                        txt+='</a>';
                        txt+='<button foodId="${food.id}" class="addToCart" style="position: absolute;top:70%;left:67%;">加入购物车</button>';
                        txt+='</div>';
                        txt+='</li>';
                        html.push(txt);
                    }
				</c:forEach>
				html.push('</ul></div>');
			</c:forEach>


			$(function (){
				meun();
				mui("div").on('tap','button.addToCart',function(){
					var foodId = $(this).attr("foodId");
					location.href = "addCartServlet?action=addItem&id=" + foodId;
				});
				mui("div").on('tap','#slider',function(){
					location.href = "phone/unpackage/phone_cart.jsp";
				});
				mui("div").on('tap','#foodItem',function(){
					var foodItem = $(this).attr("food");
					location.href = "addCartServlet?action=getFood&id=" + foodItem;
				});
			});
		</script>
	</body>

</html>
